<template>
    <div class="main-container">
        <vxe-grid ref="gridRef" v-bind="gridOptions" v-on="gridEvents">


        </vxe-grid>
    </div>
</template>
<script setup>
import { VxeGrid } from 'vxe-table'
import { ref, reactive } from 'vue'
const gridRef = ref()
const loadMockData = (rSize) => {
    return new Promise(resolve => {
        setTimeout(() => {
            for (let i = cacheList.length; i < rSize; i++) {
                const item = {
                    id: 1000000 + i,
                    name: neList[i % neList.length],
                    nickname: '',
                    sex: sxList[i % sxList.length],
                    age: aeList[i % aeList.length],
                    email: elList[i % elList.length],
                    city: cyList[i % cyList.length],
                    avatarUrl: arList[i % arList.length],
                    levelNum: lnList[i % lnList.length],
                    annualStatement: {
                        m1: asmMpas.m1[i % asmMpas.m1.length],
                        m2: asmMpas.m2[i % asmMpas.m2.length],
                        m3: asmMpas.m3[i % asmMpas.m3.length],
                        m4: asmMpas.m4[i % asmMpas.m4.length],
                        m5: asmMpas.m5[i % asmMpas.m5.length],
                        m6: asmMpas.m6[i % asmMpas.m6.length],
                        m7: asmMpas.m7[i % asmMpas.m7.length],
                        m8: asmMpas.m8[i % asmMpas.m8.length],
                        m9: asmMpas.m9[i % asmMpas.m9.length],
                        m10: asmMpas.m10[i % asmMpas.m10.length],
                        m11: asmMpas.m11[i % asmMpas.m11.length],
                        m12: asmMpas.m12[i % asmMpas.m12.length]
                    },
                    flag: fgList[i % fgList.length]
                }
                cacheList.push(item)
            }
            const data = cacheList.slice(0, rSize)
            resolve({
                data,
                total: data.length
            })
        }, 150)
    })
}
const formatCity = ({ cellValue }) => {
    const item = cityOptions.find(item => item.value === cellValue)
    return item ? item.label : cellValue
}
const formatSex = ({ cellValue }) => {
    if (cellValue) {
        return cellValue === '1' ? '男' : '女'
    }
    return ''
}
const avatarUrlCellRender = reactive({
    name: 'VxeImage',
    props: {
        circle: true,
        width: 36,
        height: 36
    }
})
const levelNumCellRender = reactive({
    name: 'VxeRate',
    props: {
        readonly: true
    }
})
const flag1CellRender = reactive({
    name: 'VxeSwitch',
    props: {
        readonly: true
    }
})
const cityOptions = [
    { label: '广东省深圳市', value: 'sz' },
    { label: '广东省广州市', value: 'gz' },
    { label: '北京市', value: 'bj' },
    { label: '上海市', value: 'sh' },
    { label: '浙江省杭州市', value: 'hz' }
]
const cityItemRender = reactive({
    name: 'VxeSelect',
    options: cityOptions
})
const sexItemRender = reactive({
    name: 'VxeSelect',
    options: [
        { label: '女', value: '0' },
        { label: '男', value: '1' }
    ]
})
const countRow = reactive({
    seq: '合计',
    name: 0,
    annualStatement: {
        m1: 0,
        m2: 0,
        m3: 0,
        m4: 0,
        m5: 0,
        m6: 0,
        m7: 0,
        m8: 0,
        m9: 0,
        m10: 0,
        m11: 0,
        m12: 0
    }
})
const meanRow = reactive({
    seq: '平均',
    name: 0,
    annualStatement: {
        m1: 0,
        m2: 0,
        m3: 0,
        m4: 0,
        m5: 0,
        m6: 0,
        m7: 0,
        m8: 0,
        m9: 0,
        m10: 0,
        m11: 0,
        m12: 0
    }
})
const gridOptions = reactive({
    border: true,
    loading: false,
    stripe: true,
    showOverflow: true,
    showFooter: true,
    height: '100%',
    columnConfig: {
        resizable: true,
        drag: true
    },
    columnDragConfig: {
        trigger: 'cell',
        showIcon: false,
        showGuidesStatus: true
    },
    rowConfig: {
        isHover: true
    },
    resizableConfig: {
        isDblclickAutoWidth: true
    },
    formConfig: {
        titleWidth: 80,
        titleAlign: 'right',
        items: [
            { field: 'name', title: '名字', span: 6, itemRender: { name: 'VxeInput' } },
            { field: 'sex', title: '性别', span: 6, itemRender: sexItemRender },
            { field: 'age', title: '年龄', span: 6, itemRender: { name: 'VxeNumberInput' } },
            { field: 'email', title: '邮箱', span: 6, itemRender: { name: 'VxeInput' } },
            { field: 'nickname', title: '昵称', span: 6, folding: true, itemRender: { name: 'VxeInput' } },
            { field: 'city', title: '所在地', span: 6, folding: true, itemRender: cityItemRender },
            { field: 'flag', title: '是否启用', span: 6, folding: true, itemRender: { name: 'VxeSwitch' } },
            { field: 'levelNum', title: '评分', span: 6, folding: true, itemRender: { name: 'VxeRate' } },
            { field: 'startTime', title: '开始时间', span: 6, folding: true, itemRender: { name: 'VxeDatePicker' } },
            { field: 'endTime', title: '结束时间', span: 6, folding: true, itemRender: { name: 'VxeDatePicker' } },
            {
                span: 24,
                align: 'center',
                collapseNode: true,
                itemRender: {
                    name: 'VxeButtonGroup',
                    options: [
                        { type: 'submit', content: '查询', status: 'primary', icon: 'vxe-icon-search' },
                        { type: 'reset', content: '重置', icon: 'vxe-icon-repeat' }
                    ]
                }
            }
        ]
    },
    toolbarConfig: {
        custom: true,
        refresh: true,
        zoom: true,
        slots: {
            buttons: 'toolbarButtons'
        }
    },
    checkboxConfig: {
        range: true
    },
    mouseConfig: {
        selected: true
    },
    keyboardConfig: {
        isEdit: true,
        isArrow: true,
        isEnter: true,
        isBack: true,
        isDel: true,
        isEsc: true
    },
    pagerConfig: {
        pageSize: 100,
        pageSizes: [3, 20, 100, 500, 1000, 5000, 10000, 50000, 100000]
    },
    scrollX: {
        gt: 0,
        enabled: true
    },
    scrollY: {
        gt: 0,
        mode: 'wheel',
        enabled: true
    },
    columns: [
        { field: 'seq', type: 'seq', width: 80 },
        { field: 'checkbox', type: 'checkbox', width: 80 },
        { field: 'avatarUrl', title: '头像', width: 80, cellRender: avatarUrlCellRender },
        { field: 'name', title: '名字', minWidth: 200, dragSort: true },
        {
            title: '基本信息',
            field: 'info',
            children: [
                { field: 'city', title: '所在地', width: 140, formatter: formatCity },
                { field: 'age', title: '年龄', width: 120 },
                { field: 'sex', title: '性别', width: 120, formatter: formatSex },
                { field: 'email', title: '邮箱', width: 220 }
            ]
        },
        { field: 'flag', title: '是否启用', width: 120, cellRender: flag1CellRender },
        { field: 'levelNum', title: '评分', width: 160, cellRender: levelNumCellRender },

    ],
    proxyConfig: {
        response: {
            result: 'data',
            total: 'total'
        },
        ajax: {
            query({ page }) {
                return loadMockData(page.pageSize)
            }
        }
    },
    footerData: [
        countRow,
        meanRow
    ]
})
const gridEvents = {
    pageChange({ pageSize }) {
        console.log('pageChange')
        gridOptions.pagerConfig.pageSize = pageSize
    },
    proxyQuery() {
        console.log('updateFooterCount()')
        // updateFooterCount()
    }
}
</script>